<template>
    <HeaderCom/> 
    <el-card class="div" :body-style="{ padding: '0px' }">
        <div class="div-top">
            <span class="div-top-span">全部分类 {{ TypeList && TypeList.length }}</span>
        </div>
        <div class="card-list">
            <el-card shadow="hover" v-for="item in TypeList" :key="item.type_id" class="card-item"
                :body-style="{ padding: '0px' }"
                @click="FenLeiList(item.type_id)">
                <el-image :src="item.cover_image" class="card-img" :title="item.type_name"></el-image>
                <div class="card-content">
                    <span class="card-title">{{ item.type_name }}</span>
                    <!-- <span class="card-time">{{ item.type_count }}篇</span> -->
                </div>
            </el-card>
        </div>
    </el-card>
</template>
  
<script setup lang="ts">
import HeaderCom from "../components/HeaderCom.vue"
import { ref, onMounted, callWithAsyncErrorHandling } from 'vue'
import { GetTypeCount } from '@/http'
import { useRouter } from "vue-router"
import { useStore } from 'vuex'

// 引入store
const store = useStore()
const router = useRouter();
const TypeList = ref()
onMounted(async () => {
    TypeList.value  = (await GetTypeCount()).data.result
})
function FenLeiList(id: number) {
    store.commit('updateFenLeiId', id); // 将id值提交给Vuex

    router.push({
        name: "FenLeiList",
        params: { id: id }
    })
}
</script>
  
<style scoped lang="scss">
.div {
    margin: 0 auto;
    width: 60%;
    //box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    border-radius: 10px;
    margin-top: 20px;
}

.div-top {
    height: 50px;
    border-bottom: 1px solid rgb(235, 238, 245);

    .div-top-span {
        color: rgb(64, 184, 255);
        font-size: 14px;
        line-height: 50px;
        margin-left: 15px;
    }
}

.card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .card-item {
        cursor: pointer;
        width: calc(22.5%);
        margin: 10px;

    }

    .card-img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        display: block;
    }

    .card-content {
        height:30px; 
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        /*实现水平居中*/
        justify-content: center;
        background: rgb(235, 238, 245);
    }

    .card-title {
        //margin-left: 105px;
        font-size: 14px;
        color: rgb(158,161,167);
    }

    .card-time {
        //margin-top: 2px;
        font-size: 12px;
        color: #999;
    }
}
</style>
  